<template>
<div>
  <div class="header">
    <div>订单</div>
  </div>
  
  <div class="main">
    <div class="main1">
      <img src="http://p0.meituan.net/xianfu/9defe99806af6d32c7d72f794d09f15010167.jpg" />
      <div class="main1-cont">
        <div class="mian1-name">大师兄鲜生（西丽店）<i class="iconfont">&#xe612;</i></div>
        <div class="mian1-finish">订单完成</div>
      </div>
    </div>
    <div class="main2">
      <div class="main2-name">
        <div class="taocan">激情三季A套餐</div>
        <div class="count">x1</div>
      </div>
      <div class="main2-money">总计1个菜，实付<span>￥3.90</span></div>
    </div>
    <div class="main3">
      <div class="main3-btn">再来一单</div>
    </div>
    
  </div>
  
  <div class="load">
    <div><span></span> 正在努力加载中…</div>
  </div>
  
  <Footerr></Footerr>

</div>
 
</template>
<script>
 import Footerr from './Footerr'
export default {
    components:{
        Footerr,
    }
 
}
</script>
<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';

.header{
  height: px2rem(88);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border-bottom: px2rem(1) solid #b2b2b2;
  margin-bottom: px2rem(20);
  div{
    font-size: px2rem(34);
    color: #333;
    font-weight: bold;
  }
  
}

.main{
  .main1{
    padding-left:px2rem(30);
    background: white;
    display: flex;
    img{
      width: px2rem(80);
      height: px2rem(80);
      margin-right: px2rem(12);
      border-radius: px2rem(40);
      margin-top: px2rem(10);
    }
    .main1-cont{
      height: px2rem(100);
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;  
      border-bottom: px2rem(1) solid #e0e0e0;
      .mian1-name{
        font-size: px2rem(32);
        color: #333;
        font-weight: bold;
        .iconfont{
          font-size: px2rem(28);
          color: #bfbfbf;
        }
      }
      .mian1-finish{
        font-size: px2rem(26);
        color: #999999;
        margin-right: px2rem(30);
      }
    }
  }
  .main2{
    padding-left: px2rem(124);
    border-bottom: px2rem(1) solid #e0e0e0;
    background: white;
    .main2-name{
      height: px2rem(63);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .taocan{
        font-size: px2rem(24);
        color: #666;
      }
      .count{
        font-size: px2rem(24);
        color: #666;
        margin-right: px2rem(30);
      }
    }
    .main2-money{
      height: px2rem(63);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: px2rem(24);
      color: #666;
      span{
        font-size: px2rem(30);
        color: #151515;
        margin-right: px2rem(30);
      }
    }
  }
  .main3{
    height: px2rem(100);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: white;
    .main3-btn{
      width: px2rem(200);
      height: px2rem(60);
      border: px2rem(1) solid #dedede;
      text-align: center;
      line-height: px2rem(60);
      font-size: px2rem(26);
      color: #333;
      border-radius: px2rem(5);
      margin-right: px2rem(30);
    }
  }
}
.load{
  height: px2rem(52);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: px2rem(26);
  color: #2f2f2f;
  span{
        content: "";
    display: inline-block;
    position: relative;
    left: -11px;
    padding: 0;
    border: 0;
    background: 0;
    width: 2px;
    height: 2px;
    border-radius: 100%;
    box-shadow: 0 -7px 0 0.9px #666, 7px 0 #999, 0 7px #999, -7px 0 #999, -5px -5px 0 0.4px #999, 5px -5px 0 1.1px #666, 5px 5px #999, -5px 5px #999;
    transform: rotate(360deg);
    animation: spin 1.5s linear infinite;
    -webkit-transform: rotate(360deg);
    -webkit-animation: spin 1.5s linear infinite;
    top: -4px;
  }
}

</style>